<template lang="pug">
  .banner
    .swiper-container#swiper1
      .swiper-wrapper
        .swiper-slide(
          v-for='str in listImg' 
          :style="{backgroundImage:'url('+str.url+')'}"
          )
      slot

</template>
<script>
import Swiper from 'swiper'

export default {
  name: 'banner',
  props: ['listImg'],
  mounted() {
    console.log('mounted', this);
    var swiper1 = new Swiper('#swiper1', {
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
        bulletElement : 'li',
        
      },
      autoplay: {
        stopOnLastSlide: true,
        disableOnInteraction: false,
        stopOnLastSlide: false,

      },
      simulateTouch : true,
      preventClicks : false,
      loop : true, 
      grabCursor : true,
      slidesPerView : 1,

     
    })
  }
}
</script>
<style lang="scss" scoped>
#swiper1 {
  width: $width;
  height: 17.3125rem /* 277/16 */;
  .swiper-slide {
    background-position: center;
    background-size: cover;
  }

}

</style>

